<template>
  <el-menu
    class="el-menu"
    active-text-color="#ffffff"
    background-color=" #030946"
    text-color="#ffffff"
    :collapse="!openMenuif"
    collapse-transition="true"
    :router="true"
    :default-active="pathnumbur"
  >
    <template v-for="menu in menuListValue" :key="menu.id">
      <el-sub-menu :index="menu.id.toString()">
        <template #title>
          <el-icon><component :is="iconMap[menu.id]" /></el-icon>
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item-group>
          
          <el-menu-item
            v-for="subMenu in menu.sList"
            :key="subMenu.sid"
            :index="subMenu.spath"
         
          >
          <el-icon><component :is="iconMap[subMenu.sid]" /></el-icon>
            {{ subMenu.stitle }}
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </template>
  </el-menu>
</template>
<script setup>
import { useMenuStore } from "../stores/index";
import { onMounted, computed, ref  } from "vue";
import { Location } from "@element-plus/icons-vue";
import api from "../services/api"
const iconMap = {
  100: 'Location',  // 使用字符串形式引用全局注册的组件
  101: 'User',      // 确保 'User' 是全局注册的图标名称
  102: 'Key',
  103: 'Football',
  104: 'Goods',
  200: 'Bicycle',
  201: 'PieChart',
  202: 'Calendar',
  203:'Dish'
};
const menuStore = useMenuStore();
const props = defineProps({
  openMenuif: {
    type: Boolean,
    required: true,
    default: true 
  },
});
const pathnumber=ref("/user")
const saveNavState=(spath)=>{
  pathnumber.value=spath;
  window.sessionStorage.setItem("spath",spath)
}


// 在组件挂载时获取菜单列表
onMounted(() => {
  window.sessionStorage.getItem("spath")
  menuStore.getMenuList();

});


// 使用计算属性来访问 menuList 的值
const menuListValue = computed(() => menuStore.menuList);

</script>
<style scoped>
.el-menu {
  width: 100%;
}
</style>